

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>进货</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/admin/layui-v2.4.5/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="/admin/css/admin.css"  media="all">
    <link rel="stylesheet" href="/admin/css/template.css"  media="all">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
    .selected_keywords{
    display: none;
    position: absolute;
    left: 0;
    top: 42px;
    padding: 5px 0;
    z-index: 899;
    min-width: 100%;
    border: 1px solid #d2d2d2;
    max-height: 300px;
    overflow-y: auto;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,.12);
    box-sizing: border-box;
    }
    .list-group{
    padding: 0 10px;
    line-height: 36px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }
    .list-group > li hover{
        background-color: #5FB878;
        color: #fff;
    }

</style>
</head>
<body>
<script src="/admin/layui-v2.4.5/layui/layui.js" charset="utf-8"></script>
<div class="layui-fluid" style="padding: 1px "id="test1">
    <div class="layui-card">
        <div class="layui-card-header">进货信息</div>
        <div class="layui-card-body" style="padding: 1px;">
        <form class="layui-form" id="addPurchaseForm"lay-filter="formPurchase">
            <div class="layui-form-item">
                <label class="layui-form-label">药品名称：</label>
                <div class="layui-input-block">
                    <input type="text" name="medName" class="layui-input" id="fuzzy_search" oninput="template_choise(this)" value="" lay-verify="required">
                    <div class="input-group selected_keywords"></div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">数量：</label>
                <div class="layui-input-block">
                    <input type="text" name="count" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">进价：</label>
                <div class="layui-input-block">
                    <input type="text" name="price" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">供应商：</label>
                <div class="layui-input-block">
                    <select class="layui-input" name="sup" id="supcoin" lay-verify="required">
                        <option>请选择供应商</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注：</label>
                <div class="layui-input-block">
                    <textarea name="other" placeholder="" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="component-form-element">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
    </div>
</div>
</div>
<script>
    layui.use(['layer','form'], function() {
        var $ = layui.$ //由于layer弹层依赖jQuery，所以可以直接得到
            , layer = layui.layer
            , form = layui.form
    ,index = parent.layer.getFrameIndex(window.name)

        form.on('submit(component-form-element)', function(data){
            var obj = eval(data.field);
            $.ajax({
                url: '/hospital/insertPurchase',
                dataType: 'json',
                type: 'post',
                // async:false,
                contentType: "application/json; charset=utf-8",
                data:JSON.stringify({
                    "medName":obj.medName,
                    "count":obj.count,
                    "price":obj.price,
                    "sup":obj.sup,
                    "other":obj.other}),
                success: function (data) {
                    if (data.code == 1) {
                        parent.layer.msg("添加成功");
                        parent.layer.close(index);
                        parent.layer.open({
                            type: 2,
                            area: ['700px', '450px'],
                            fixed: false,
                            maxmin: true,
                            shadeClose: true,
                            content: 'med-in.html'
                        });
                    } else {
                        layer.msg("添加失败");
                    }
                }
            })
            return false;
        });
    $(document).ready(function () {
    $.ajax({
        url: '/hospital/allSup',
        dataType: 'json',
        type: 'get',
        success: function (data) {
            $.each(data.data, function (index, item) {
                $('#supcoin').append("<option value = '" + item.id + "'>" + item.sup_name + "</option>");// 下拉菜单里添加元素
            });
            form.render('select')


        }
    })
    })})
    $(document).click(function(e){
        var _con = $('.selected_keywords'); // 设置目标区域
        if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
            // todo
            $(".selected_keywords").css("display","none")
        }
    });
    // 搜索选择功能
    function template_choise(obj) {

        // 判断输入框内容为空的时候
        if ($(obj).val().length == 0){
            $(".selected_keywords").css("display","none")
            var selected_keywords = $(".selected_keywords")
            selected_keywords.empty()
        }
        else {
            //获取setinterval的索引
            var index = window.setInterval(function () {
                // 获取输入框中的搜索关键字
                var serach_keywords = $(obj).val()
                var list_template = "<ul class='list-group'></ul>"
                //执行模糊查询功能，延迟200ms
                $.ajax({
                    type: "POST",
                    url: "/hospital/medicine/name",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify({
                        "keywords":serach_keywords}),
                    dataType: "json",
                    success: function (data) {
                        $(".selected_keywords").css("display", "block")
                        $(".selected_keywords").html(list_template)
                        $(".list-group").empty()
                        //判断是否存在搜索结果
                        if(data.code == 1) {
                            $.each(data.data, function (i, item) {
                                // var data_complte = item["name"] + "," + data["template_name"] + "," + data["template_desc"]
                                var html_style = "<a href='javascript:'><li class='list-group-item' onclick='choise_one_template(this)'>" + item.name + "</li></a>"
                                $(".list-group").append(html_style)
                                // alert("code"+1);
                            })
                        }
                        else if(data.code == "0"){
                            // alert("code"+0);
                            $(".list-group").append("<li class='list-group-item'>没有找到合适的结果</li>")
                        }
                        //清除当前interval
                        window.clearInterval(index)
                    },
                    fail: function () {
                        alert("查询失败")
                    }
                })
                // 延时200ms
            }, 200)
        }
    }
    //添加选择的模版到展示栏
    function choise_one_template(obj) {
        //获取选择的值
        var template_data = $(obj).text()
        // alert(template_data);
        $("#fuzzy_search").val(template_data);
        $(".selected_keywords").empty();
        // document.getElementById("fuzzy_search").text=template_data;

        // alert($("#fuzzy_search").val());
    }


</script>
</body>
</html>
